<!--
 * @Description: 
 * @Author: wangyan
 * @Date: 2021-03-02 13:39:43
 * @LastEditTime: 2021-03-31 18:33:31
 * @LastEditors: @yzcheng
-->
<!--  -->
<template>
  <div class="search-form">
    <el-form :inline="true" :model="searchForm" size="large" class="demo-form-inline">
      <el-form-item :label="$t('flowInstance.flowName')">
        <el-input
          v-model="searchForm.processDefName"
          :placeholder="$t('flowInstance.flowName')"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('flowInstance.linkName')" size="small">
        <el-input
          v-model="searchForm.taskName"
          :placeholder="$t(`form.classificationName`)"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('flowInstance.category')">
        <el-popover placement="bottom" :width="200" trigger="click">
          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          <template #reference>
            <el-input size="small" v-model="searchForm.parName" clearable></el-input>
          </template>
        </el-popover>
      </el-form-item>
      <el-form-item :label="$t('flowTask.table.createTime')">
        <el-date-picker
          v-model="searchForm.date"
          type="daterange"
          size="small"
          range-separator="——"
          start-placeholder=""
          end-placeholder=""
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" size="small">{{
          $t(`button.search`)
        }}</el-button>
        <el-button @click="resetForm" size="small">{{ $t(`button.reset`) }}</el-button>
      </el-form-item>
    </el-form>
  </div>
  <Table
    :loading="loading"
    :tableData="tableData"
    :columnData="columnData"
    :othercolumnData="othercolumnData"
    :pageOption="pageOption"
  />
  <el-dialog v-if="dialogVisible" v-model="dialogVisible" :append-to-body="true" width="1200px">
    <Modal :data="ModalData" />
  </el-dialog>
  <!-- <Modal :dialogVisible="dialogVisible" :controlModal="this.controlModal()" /> -->
</template>

<script>
import Table from '../../components/Table.vue'
import Modal from './component/Modal.vue'

import { mapActions, mapState } from 'vuex'

import { timestampToTime, dateToMs } from '@/utils/currency.js'
export default {
  name: 'HistoryList',
  data() {
    return {
      loading:false,
      searchForm: {},
      tableData: [],
      pageOption: {
        pageNum: 1,
        pageChange: this.pageChange,
        total: 0,
      },
      ModalData: {
        processDefinitionId: '',
        processIntanceId: '',
        taskId: '',
      },
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      dialogVisible: false,
      centerDialogVisible: true,
      columnData: [
        { title: '当前环节', prop: 'taskName' },
        // { title: '实例名称', prop: 'processIntanceName' },
        // { title: '分配人员', prop: 'assignee' },
        {
          title: '创建时间',
          prop: 'createDate',
          // formatter: (row) => {
          //   return timestampToTime(row.createTime)
          // },
        },
        {
          title: '结束时间',
          prop: 'updateDate',
          // formatter: (row) => {
          //   return timestampToTime(row.endTime)
          // },
        },
      ],
      othercolumnData: [
        {
          title: '操作',
          prop: '操作',
          list: [{ title: '流程追踪', fn: this.flowTrack,limit:'LCZX:LCBL:YBRW:FLOW' }],
        },
      ],
    }
  },
  components: {
    Table,
    Modal,
  },
  computed: {
    ...mapState({
      treeData: (state) => state.flowClassifyStore.treeData,
    }),
  },
  methods: {
    ...mapActions('historyListStore', ['pageHistoryList', 'flowTrackByProcessInstanceId']),
    ...mapActions('flowClassifyStore', ['getFlowList']),

    async searchTodoList(pageOption) {
      this.loading = true
      const res = await this.pageHistoryList(pageOption)
      this.loading = false
      this.tableData = res.records
      console.log(this.tableData, 'this.tableData')
      this.pageOption.total = res.total
    },
    flowTrack(index, row) {
      this.ModalData.processIntanceId = row.processIntanceId
      this.ModalData.processDefinitionId = row.processDefinitionId
      this.ModalData.taskDefinitionKey = row.taskDefinitionKey
      this.dialogVisible = true
    },
    editFlow(index, row) {
      console.log(row)
    },
    pageChange(val) {
      var data = Object.assign({}, this.searchForm)
      data = this.dataProcess(data)
      this.searchTodoList({
        pageOption: { pageNum: val, pageSize: 10 },
        data,
      })
    },
    handleNodeClick(data) {
      this.searchForm.parName = data.name
      this.searchForm.processCategories = data.id
    },
    dataProcess(data) {
      if (data.date && data.date.length > 0) {
        data.startTime = dateToMs(data.date[0])
        data.endTime = dateToMs(data.date[1])
        delete data.date
      }
      if (data.parName) {
        delete data.parName
      } else {
        delete data.parName
        delete data.processCategories
      }
      return data
    },
    onSearch() {
      var data = Object.assign({}, this.searchForm)
      data = this.dataProcess(data)

      this.searchTodoList({
        pageOption: { pageNum: 1, pageSize: 10 },
        data: data,
      })
    },
    resetForm() {
      this.searchForm = {}
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  // created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.searchTodoList({ pageOption: { pageNum: 1, pageSize: 10 }, data: {} })
    this.getFlowList()
  },
}
</script>
<style scoped lang="scss">
/* @import url(); 引入scss类 */
.search-form {
  margin-top: 15px;
}
</style>
